<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			初识Vue：
					1.<div id="root">是一个容器，容器中写的不是原始html代码，而是Vue的模板代码。
					2.所谓的模板代码，类似于React中的jsx，是html+js的混合体
					3.{{xxx}},xxx会自动读取data中的xxx属性，xxxx当表达式去解析
		-->
		<!-- 准备好一个容器 -->
		<div id="root">
			<h1>Hello,{{school.name.toUpperCase()}}</h1>
			<h1>学校坐落在：{{school.address}}</h1>
			<h1>我学的是：{{school.subject()}}学科</h1>
			<hr/>
			<h1>{{school.name,school.address}}</h1> <!-- 最终展示的是name -->
			<h1>{{school.name && school.address}}</h1> <!-- 最终展示的是address-->
			<h1>{{school.name ? 1 : 2}}</h1> <!-- 最终展示的是1-->
		</div>

		<script type="text/javascript" >
			//创建一个Vue的实例对象,并传入配置对象
			new Vue({
				el:'#root', //el用于指定当前Vue实例为哪个容器服务，值是选择器字符串，选择的写法类似于jQuery
				data:{ //data是存储数据的地方，为root容器提供数据，值为一个对象，相当与React中的state
					school:{
						name:'atguigu',
						address:'宏福科技园综合楼',
						subject:()=>'前端'
					}
				}
			})
		</script>
	</body>
</html>